<template>
  <view class="page">
    <!-- 进度 -->
    <view class="header-bg height-240 padding-top-xl">
      <block v-if="afterInfo.status >= 0">
        <uni-steps :options="steps" :active="speed" activeColor="#ffffff" deactiveColor="#ffffff"></uni-steps>
      </block>
    </view>
    <view class="margin-lr-sm radius-16 bg-white padding afterStatus" :class="afterInfo.status < 0 ?'up':''">
      <!-- 售后状态部分 -->
      <view class="fu-fs32 text-333 text-bold" v-if="isContentShow([-2, -1, 0, 1, 2, 3, 4], afterInfo.status)">
        <text v-if="afterInfo.status == -2">{{i18n['售后关闭']}}</text>
        <text v-if="afterInfo.status == -1">{{i18n['商家驳回']}}</text>
        <text v-if="afterInfo.status == 0">{{i18n['请等待商家处理']}}</text>
        <text v-if="afterInfo.status == 1">{{i18n['请寄回商品']}}</text>
        <text v-if="afterInfo.status == 2">{{i18n['请等待商家退款']}}</text>
        <text v-if="afterInfo.status == 3">商家已收货</text>
        <text v-if="afterInfo.status == 4">{{i18n['售后已完成']}}</text>
      </view>
      <!-- 蓝色字体部分 -->
      <view class="fu-fs24 text-vecode margin-top-sm" v-if="isContentShow([-2, 0, 1, 2,3], afterInfo.status)" style="color: #FF6F27;">
        <view v-if="afterInfo.status == -2">{{i18n['撤销时间']}}:{{ afterInfo.cancel_time }}</view>
        <view v-if="afterInfo.status == 0">{{i18n['您已成功发起退款申请，请耐心等待商家处理。']}}</view>
        <view v-if="afterInfo.status == 1">{{i18n['商家已同意退货申请，请寄回商品并提交物流信息。']}}</view>
        <view v-if="afterInfo.status == 2">{{i18n['商品已寄回，请等待商家收货并退款。']}}</view>
		<view v-if="afterInfo.status == 3">商家已收货，请等待商家退款。</view>
      </view>
      <!-- 灰色字体部分 -->
      <view class="fu-fs24 text-666 margin-top-sm" v-if="isContentShow([-2, -1, 0, 1, 2,3], afterInfo.status)">
        <view v-if="afterInfo.status == -2">{{i18n['您已撤销本次退款申请，如有问题未解决，您可重新发起申请']}}</view>
        <view v-if="afterInfo.status == -1 && afterInfo && afterInfo.refund_reject">{{afterInfo.refund_reject}}</view>
		<view v-if="afterInfo.status == 0">
			<view>{{i18n['商家同意，系统将退款给您']}}</view>
			<view class="margin-top-sm">如商家拒绝，您可以修改申请后再次发起，商家会重新处理。</view>
		</view>
        <view v-if="afterInfo.status == 1">{{i18n['未于商家协商一致，请勿使用到到付或平邮，以免商家拒收。请填写真实的退货物流信息，逾期未填写，退货申请将自动关闭。']}}</view>
        <view v-if="afterInfo.status == 2 || afterInfo.status == 3">{{i18n['如果商家收到货并验货无误，将操作退款给您。钱款原路返回至您支付时选择的账户']}}</view>
      </view>
    </view>
    <!-- 退款信息 -->
    <view class="margin-lr-sm radius-16 bg-white padding margin-top-sm" v-if="refundInfoShow">
      <view class="fu-fs32 text-333 text-bold padding-bottom-sm solid-bottom">
        {{i18n['商家已退款']}}
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款金额'] }}</view>
        <view class="text-333 text-price">{{ afterInfo && afterInfo.refund_money }}</view>
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款账户'] }}</view>
        <view class="text-333">{{ afterInfo.refund_account || '原路退回' }}</view>
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款时间'] }}</view>
        <view class="text-333">{{ afterInfo.refund_time }}</view>
      </view>
    </view>

    <!-- 退款信息 -->
    <view class="margin-lr-sm radius-16 bg-white padding margin-top-sm" v-if="afterInfo && afterInfo.goods_id">
      <view class="title-block flex align-center fu-fs32 text-333 text-bold margin-bottom-sm">
        {{i18n['退款信息']}}
      </view>
      <view class="solid-bottom solid-top">
		  <view class="flex align-center padding-top-24" @click="handleJump" :data-url="`/pages/goods/shop/shop/index?partner_id=${afterInfo.partner_id}`">
			  <image :src="afterInfo.store_logo" class="fu-block-48 margin-right-16"></image>
			  <text class="text-666 fu-fs28 margin-right-16">{{afterInfo.store_name}}</text>
			  <image src="https://localelife.chunchuangkeji.cn/h5img/images/arrow-r-3.png" style="width: 12rpx;height: 22rpx;"></image>
		  </view>
        <view class="flex align-stretch padding-tb-32" @click="navToDetail">
          <view class="fu-block-140 margin-right-sm radius overHidden">
            <fu-image radius="16" :src="afterInfo.goods_thumb" mode="aspectFill"></fu-image>
          </view>
          <view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
            <view>
              <view class="fu-fs28 text-cut text-333 text-bold">{{ afterInfo.goods_name }}</view>
              <view class="flex align-center margin-top-16">
              	<view class="flex align-center margin-right-48">
              		<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
              		<text class="text-666 fu-fs20" v-if="afterInfo.is_appointment">需要预约</text>
              		<text class="text-666 fu-fs20" v-else>无需预约</text>
              	</view>
              	<view class="flex align-center">
              		<image src="https://localelife.chunchuangkeji.cn/h5img/images/008.png" class="fu-block-22 margin-right-6"></image>
              		<text class="text-666 fu-fs20">{{afterInfo.business_hours}}</text>
              	</view>
              </view>
            </view>
			<view class="flex align-center justify-between">
				<view class="flex align-baseline">
				<text>
					<text class="text-bold fu-fs32 text-price text-prices" style="color: #FF5C5C;">{{ afterInfo.shop_price }}</text>
				</text>
				  <text class="margin-left-16 text-999 fu-fs20 text-through">
				  	¥{{afterInfo.market_price}}
				  </text>
				</view>
				<text class="text-999 fu-fs24">x{{afterInfo.num}}</text>
			</view>
          </view>
        </view>
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['服务类型'] }}</view>
        <view class="text-333">{{ afterInfo && afterInfo.refund_type_title }}</view>
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款原因'] }}</view>
        <view class="text-333 word-break-all">{{ afterInfo && afterInfo.refund_reason }}</view>
      </view>
      <!-- <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款金额'] }}</view>
        <view class="text-333 text-price">{{ afterInfo && afterInfo.refund_money }}</view>
      </view> -->
      <!-- <view class="padding-top-sm fu-fs24 flex align-stretch" v-if="afterInfo && afterInfo.refund_content">
        <view class="margin-right-lg text-999">{{ i18n['退款说明'] }}</view>
        <view class="text-333 word-break-all flex-sub" style="min-width: 1px;">{{ afterInfo && afterInfo.refund_content }}</view>
      </view> -->
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['申请时间'] }}</view>
        <view class="text-333">{{ afterInfo && afterInfo.create_time }}</view>
      </view>
      <view class="padding-top-sm fu-fs24 flex align-center">
        <view class="margin-right-lg text-999">{{ i18n['退款编号'] }}</view>
        <view class="text-333">
          {{ afterInfo && afterInfo.server_no }}
          <text class="text-vecode margin-left" @click="copyInfo(afterInfo.server_no)" style="color: #FE6F5C;">{{ i18n['复制'] }}</text>
        </view>
      </view>
	  <view class="padding-top-sm fu-fs24 flex align-stretch" v-if="afterInfo && afterInfo.refund_picture.length != 0">
	    <view class="margin-right-lg text-999">{{ i18n['退款凭证'] }}</view>
	    <view class="flex">
	      <view class="fu-block-160 margin-right-xs" v-for="(item, index) in afterInfo.refund_picture" :key="index"
	        @click="previewImage(index)">
	        <fu-image :src="item" mode="aspectFill"></fu-image>
	      </view>
	    </view>
	  </view>
      <!-- <view class="padding-top-sm fu-fs24 flex align-center" v-if="afterInfo.refund_type == '2' && afterInfo.express_no">
        <view class="margin-right-lg text-999">{{ i18n['物流单号'] }}</view>
        <view class="text-333">{{afterInfo.express_no}}</view>
      </view> -->
    </view>
    <view class="solid-top bottom-action bg-white">
		<view class="footer-wrap-btn height-100  padding-lr-sm flex justify-between align-center">
			<!-- @tap="toCustomer()" -->
			<button class="flex align-center cu-btn" open-type="contact">
			 <image src="https://localelife.chunchuangkeji.cn/h5img/images/tel-3.png" mode="widthFix" class="fu-block-32 margin-right-xs"></image>
			  <text>{{i18n['联系平台']}}</text>
			</button>
			<view class="flex-sub flex justify-end" style="min-width: 1px;">
			  <!-- <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="toAftermarket"
			    v-if="isContentShow([-2, -1], afterInfo.status)">
			    {{ i18n['发起售后'] }}
			  </view> -->
			  <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="cancelAfter"
			    v-if="(afterInfo.status == 0 && afterInfo.refund_type == '1')">
			    {{ i18n['撤销申请'] }}
			  </view>
			  <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="cancelAfter"
			    v-if="(afterInfo.status == 0 || afterInfo.status == 1) && afterInfo.refund_type == '2' && !afterInfo.express_no">
			    {{ i18n['撤销申请'] }}
			  </view>
			  <!-- <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="toAftermarket(1)"
			    v-if="(afterInfo.status == 0 || afterInfo.status == 1) && afterInfo.refund_type == '1' && !afterInfo.express_no">
			    修改申请
			  </view> -->
			  <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="sendLog"
			    v-if="afterInfo.status == 1 && afterInfo.refund_type == '2' && !afterInfo.express_no">
			    {{ i18n['寄回商品'] }}
			  </view>
			  <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="lookLog"
			    v-if="(afterInfo.status == 1 && afterInfo.express_no) || (afterInfo.status == 2 && afterInfo.refund_type == '2')">
			    {{ i18n['查看物流'] }}
			  </view>
			  <view
			    class="round width-170 height-60 line-height-60 fu-fs24 margin-right-sm text-center bg-f6 text-333 btn"
			    @click="delOrder"
			    v-if="isContentShow([-2, -1, 3], afterInfo.status)">
			    {{ i18n['删除订单'] }}
			  </view>
			</view>
		</view>
    </view>
    <view class="back-success-wrap" v-if="backSuccessShow">
      <view class="mask" @click="backSuccessShow = false">

      </view>
      <view class="back-content flex flex-direction justify-between align-center">
        <view class="back-content-info bg-white flex flex-direction align-center text-333">
			<view class="fu-fs32 text-bold">系统提示</view>
          <image src="https://localelife.chunchuangkeji.cn/h5img/images/checkfill.png" style="width: 136rpx;height: 98rpx;margin-top: 32rpx;"></image>

          <view class="back-success text-333 text-xl text-bold margin-top-32">
            {{i18n['撤销申请成功']}}
          </view>
        </view>
		<image src="https://localelife.chunchuangkeji.cn/h5img/images/close-2.png" class="fu-block-36 margin-top-xl" @click="backSuccessShow = false"></image>
      </view>
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: null,
        steps: [], // 退款步骤
        speed: 0,
        sku_id: 0,
        backSuccessShow: false,
        afterInfo: {}, // 售后订单详情信息
        itemIndex: '', // 列表订单索引
      };
    },
    computed: {
      refundInfoShow() {
        let flag = false;
        // 不能不判断，后续可能会有换货，换货现在没有原型图，不太清楚流程
        if (this.afterInfo.refund_type == 1 || this.afterInfo.refund_type == 2) {
          if (this.afterInfo.status == 4) {
            flag = true;
          }
        }
        return flag;
      }
    },
    onLoad(options) {
      this.setNavigationBarTitle(this.i18n['售后详情']);
      const {
        id,
        itemIndex
      } = options;
      this.id = id;
      this.itemIndex = itemIndex;
      this.getData();
      uni.$on('onRefundOrederDetailPageUpdata', () => {
        this.getData();
      })
    },
    onUnload() {
      uni.$off('onRefundOrederDetailPageUpdata');
    },
    methods: {
      // 发起售后
      toAftermarket(item) {
        let data = {
          goods_id: this.afterInfo.goods_id,
          goods_money: this.afterInfo.goods_money,
          goods_name: this.afterInfo.goods_name,
          goods_thumb: this.afterInfo.goods_thumb,
          sku_id: this.afterInfo.sku_id,
          sku_name: this.afterInfo.sku_name,
          shop_price: this.afterInfo.shop_price,
          num: this.afterInfo.num
        }
		if(item){
		  data.afterId= this.afterInfo.id
		}
        uni.setStorageSync('afterorder_goods', JSON.stringify(data));
        this.$urouter.navigateTo({
          url: '/pages/order/afterorder/afterorder-apply/index',
          params: {
            order_sn: this.afterInfo.order_sn,
            order_type: this.afterInfo.order_type,
            itemIndex: this.itemIndex,
            status: this.afterInfo.order_status,
            back: 2
          }
        });
      },
      /**
       * 删除订单
       */
      delOrder() {
        let that = this;
        this.$util.showModal({
          title: global.i18n['提示'],
          content: global.i18n['确认删除吗？'],
          success: function(res) {
            if (res.confirm) {
              that.$api.post(global.apiUrls.delAfterSale, {
                id: that.id
              }).then(result => {
                if (result.data.code == 1) {
                  that.$message.info(that.i18n['删除成功']);
                  uni.$emit('onPageUpdata', {
                    type: 7, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单， 7: 删除售后订单
                    index: that.itemIndex,
                  })
                  uni.$emit('onOrederDetailPageUpdata');
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 500);
                } else {
                  that.$message.info(result.data.msg);
                }
              }).catch(err => {
                console.log(err);
              });
            }
          }
        })
      },
      /**
       * 查看物流
       */
      lookLog() {
        uni.navigateTo({
          url: '/pages/order/orderdetail/express-delivery/index?server_no=' + this.afterInfo.server_no
        })
      },
      /**
       * @description copy复制
       * @param {String} data 数据
       */
      copyInfo(data) {
        let that = this;
        uni.setClipboardData({
          data,
          success: function() {
            that.$message.info(this.i18n['复制成功']);
            // console.log('success');
          }
        });
      },
      // 预览图片
      previewImage(index) {
        uni.previewImage({
          urls: this.afterInfo.refund_picture,
          current: index
        });
      },
      //联系客服
      toCustomer() {
        this.$urouter.navigateTo('/pages/index/contactUs/index')
      },
      // 去详情页
      navToDetail() {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail/index',
          params: {
            goods_id: this.afterInfo.goods_id,
            sku_id: this.afterInfo.sku_id
          }
        });
      },
      // 取消售后
      cancelAfter() {
        let that = this;
        this.$util.showModal({
          title: global.i18n['提示'],
          content: global.i18n['确认取消吗？'],
		  confirmColor: '#FF6F27',
          success: (res) => {
            if (res.confirm) {
              that.$api.post(global.apiUrls.getGoodsAfterSaleCentel, {
                id: that.id
              }).then(res => {
                if (res.data.code == 1) {
                  this.backSuccessShow = true;
                  // 通知列表页面更新数据
                  uni.$emit('onPageUpdata', {
                    type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，5: 评论， 6: 提交售后
                  });
                  // 通知详情页面更新数据
                  uni.$emit('onOrederDetailPageUpdata');
                  that.getData();
                } else {
                  this.$message.info(res.data.msg);
                }
              }).catch(err => {
                this.$message.info('服务器错误，请稍后重试');
              });
            }
          }
        })

      },
      // 提交物流信息  寄回商品
      sendLog() {
        this.$urouter.navigateTo({
          url: '/pages/order/afterorder/afterorder-sendback/index',
          params: {
            id: this.id,
            itemIndex: this.itemIndex
          }
        });
      },
      //
      getData() {
        this.$api.post(global.apiUrls.getGoodsAfterSaleDetaile, {
          id: this.id
        }).then(res => {
          if (res.data.code == 1) {
            this.afterInfo = res.data.data;
            if (this.afterInfo.refund_type == 1) {
              this.steps = [{
                  title: this.i18n['提交申请']
                },
                {
                  title: this.i18n['商家审核']
                },
                {
                  title: this.i18n['退款完成']
                }
              ];
            } else if (this.afterInfo.refund_type == 2) {
              this.steps = [{
                  title: this.i18n['提交申请']
                },
                {
                  title: this.i18n['商家审核']
                },
                {
                  title: this.i18n['寄回商品']
                },
                {
                  title: this.i18n['退款完成']
                }
              ];
            }
            this.filterStatus(this.afterInfo.status);
          }
        }).catch(err => {
          this.$message.info('暂无信息');
          setTimeout(() => {
            uni.navigateBack();
          }, 500)
        });
      },
      /**
       * @description 步骤器当前步数  -2售后取消 -1商家驳回 0等待商家处理 1商家同意 2商家已收货 3退款 4商家已发货
       */
      filterStatus(status) {
        let that = this;
        switch (Number(status)) {
          case -2:
            that.speed = 1;
            break;
          case -1:
            that.speed = 1;
            break;
          case 0:
            that.speed = 0;
            break;
          case 1:
            that.speed = 1;
            // if (that.afterInfo.express_no) that.speed = 2;
            break;
          case 2:
            that.speed = 2;
            break;
          case 3:
            if (that.afterInfo.refund_type == 2) {
              that.speed = 2;
            } else {
              that.speed = 3;
            }
            break;
          case 4:
            that.speed = 3;
            break;
        }
      },
      motifyAfter(item) {
        this.$urouter.navigateTo({
          url: '/pages/order/afterorder/afterorder-apply/index',
          params: {
            sku_id: item.sku_id,
            order_sn: item.order_sn,
            goods_id: item.goods_id,
            status: item.status,
            index: this.itemIndex,
            order_type: item.order_type,
            back: 2,
            server_no: item.server_no,
          }
        });
      },
      /**
       * @description 判断内容是否显示
       * @param {String} arr = 要判断的数组
       * @param {String | Number} val = 要判的值
       */
      isContentShow(arr, val) {
      	return arr.includes(val * 1);
      },
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    padding-bottom: 150rpx;
    .header-bg {
		background-image: url($IMG_BASE_URL + 'afterorder-bg.png');
      background-repeat: no-repeat;
      background-size: 100%;
	 // background: #B82441;
    }
    .back-success-wrap {
      .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.3);
      }
      .back-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        width: 540rpx;
        // height: 424rpx;
        .back-content-info {
          border-radius: 25rpx;
          width: 540rpx;
          padding: 56rpx 0;
    
          .text {
            font-size: 150rpx;
          }
        }
      }
    }
    .afterStatus {
      position: relative;
      z-index: 11;
      margin-top: -30rpx;
      &.up {
        margin-top: -180rpx;
      }
    }
    .bottom-action {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
	  z-index: 999;
      .btn {
      	&:last-child {
      		margin-right: 0;
      	}
      }
    }
  }
  .cu-btn {
	  background: transparent !important;
  }
</style>
